<template>
	<div class="wrapper">
    <iframe id="domain1-iframe" :src="`${$domain}/domain2`" style="display:none;"></iframe>
		<v-head @funwidth='getwidth' @getCurrent='getCurrent'></v-head>   
    <span class="none">{{onRoutes}}</span>
		<div class="content" :style="collapsed ? 'left:140px' : 'left: 51px'">
      <div class="menu-child" v-if="!isStart">
        <el-tabs v-model="onRoutes" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(child, idx) in currentMenu.child" :label="child.title" :name="child.name" :key="idx"></el-tab-pane>
        </el-tabs>
        <div class="menu-tag" v-if="showCrub">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(item, index) in menu" :key="index" v-if="item.name == currentMenu.name" :to="{ path: currentMenu.name }">{{item.tooltip}}</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(child, idx) in currentMenu.child" :key="idx" v-if="(child.name == onRoutes) && (currentMenu.child.length != 0)">{{child.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="content-wid"> 
        <transition name="move" mode="out-in">
          <keep-alive v-if="isRouterAlive">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
      <footer class="foot-container">         
        <p>Copyright 2014 - now  www.castons.cn, All Rights Reserved.</p>
        <p>Castons Insurance Technology Co.,Ltd 皖ICP备18023094号</p>
      </footer>
		</div>
	</div>
</template>

<script>
  import PCMenu from 'static/json/menu.json'
  import vHead from './Header.vue';
	export default {
    provide () {
      return {
        reload: this.reload,
      }
    },
		data() {
			return {
        collapsed: true,
        isRouterAlive: true,
        currentMenu: {child: []},
        isIndex: false,
        menu: PCMenu,
        showCrub: false, //是否显示面包屑菜单
        isStart: true, //是否为起始页
			}
		},
		components: {
      vHead,
    },
		computed: {
      onRoutes(){
        this.isStart = this.$route.meta.isStart || false
        this.showCrub = !this.$route.meta.onCrub       
        return this.$route.path
      },
    },
		mounted() {
      let _self = this
      window.onload = function() {  
        const domain1Iframe = document.getElementById('domain1-iframe');
        domain1Iframe.contentWindow.postMessage({key: 'ms_token'}, _self.$domain);
      }
      window.addEventListener('message', function(event) {
        // if(event.data.token == undefined) return window.location.href = _self.$domain
        if (event.origin === _self.$domain) {
          localStorage.setItem('ms_token', event.data.token);
        }
      }, false);
    },
		methods: {      
      // 二级导航跳转
      handleClick(tab, event) {
        // console.log("---------",tab.name);
        
        let _self = this
        _self.isIndex = false
        let param = {path: tab.name}
        _self.$nextTick(()=>{
          _self.$router.replace(param)
        })
      },
      // 获取当前菜单项
      getCurrent(item){
        let _self = this
        _self.currentMenu = item
      },
      reload () {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },
      getwidth(item){
        this.collapsed = item
        // console.log(this.collapsed)
      },
      goPage(item){
        let _self = this
        _self.$router.replace({path: item})
      },
    }
	}

</script>
<style scoped lang="sass">
  .content 
    position: absolute
    right: 0
    top: 61px
    bottom: 0
    background: #fff
    overflow-y: scroll
    transition: left .3s ease-in-out
  // @media screen and (max-width:1440px) 
  //   .content 
  //     top: 151px
  .content-wid 
    padding: 10px
  .foot-container 
    text-align: center
    color: #c0c4cc
  .menu-child 
    background: #fff;
    /deep/ .el-tabs__item 
      height: 50px
      line-height: 50px
      padding: 0 25px
      font-size: 14px
      color: #000
    /deep/ .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) 
      padding-left: 25px;
    /deep/ .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child 
      padding-right: 25px;
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav 
      border: 0;
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item 
      border-left: 0;
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active 
      background: #f2f2f2
      color: #409EFF
      position: relative;
      &::after 
        display: inline-block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        height: 2px;
        width: 50%;
        background: #409EFF
    /deep/ .el-tabs__item:hover 
      color: #409EFF
    .menu-tag 
      // height: 50px;
      /deep/ .el-breadcrumb 
        margin-top: 10px;
        margin-left: 30px;
        padding: 0 10px;
        border-left: 3px solid #409EFF
        font-size: 13px;
</style>
